<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px" class="flex-vhc">
                    <el-form-item label="公司名称" prop="entname">
                        <el-input v-model="queryParams.entname" placeholder="输入公司名称" clearable style="width: 240px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="公司名称" prop="area">
                        <AddressSelect v-model="queryParams.area"></AddressSelect>
                    </el-form-item>
                    <el-form-item style="margin-left: 40px;">
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        <el-button icon="Plus" type="success" @click="addNew">新增</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="detectionList"
                    style="margin-top: 30px;margin-left: 20px;margin-right: 20px;width: calc(100% - 40px);">
                    <el-table-column type="index" width="50" label="序号" />
                    <el-table-column label="公司名称" align="center" prop="name" />
                    <el-table-column label="分类" align="center" prop="companyClass" width="150" />
                    <el-table-column label="所在地区" align="center" prop="address" />
                    <el-table-column label="成立日期" align="center" prop="establishmentDate" />
                    <el-table-column label="法人代表" align="center" prop="legalRepresentative" />
                    <el-table-column label="联系人" align="center" prop="contacter" />
                    <el-table-column label="联系电话" align="center" prop="telNo" />
                    <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary" @click="lookItem(scope.row)">查看</el-button>
                            <!-- <el-button link type="primary" @click="editItem(scope.row)">编辑</el-button> -->
                            <!-- <el-button link type="danger" @click="delItem(scope.$index)">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="getList" style="margin-right: 20px;" />
            </el-col>
        </el-row>

        <!-- 详情 -->
        <el-dialog v-model="isShowEditDialog" width="800px" append-to-body :title="getDialogTitle()">
            <el-form :model="dialogInfo" :rules="rules" ref="dialogFormRef" label-width="150px" style="padding-left: 20px;"
                :validate-on-rule-change="false" :disabled="!dialogIsEdit">
                <el-form-item label="公司名称" prop="name">
                    <el-input v-model="dialogInfo.name" placeholder="请输入" style="width: 440px" maxlength="100" />
                </el-form-item>
                <el-form-item label="法人代表" prop="legalRepresentative">
                    <el-input v-model="dialogInfo.legalRepresentative" placeholder="请输入" style="width: 440px"
                        maxlength="20" />
                </el-form-item>
                <el-form-item label="办公电话" prop="officeTel">
                    <el-input v-model="dialogInfo.officeTel" placeholder="请输入" style="width: 440px" maxlength="20" />
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="uniformSocialCreditNo">
                    <el-input v-model="dialogInfo.uniformSocialCreditNo" placeholder="请输入" style="width: 440px" />
                </el-form-item>
                <el-form-item label="联系人" prop="contacter">
                    <el-input v-model="dialogInfo.contacter" placeholder="请输入" style="width: 440px" maxlength="20" />
                </el-form-item>
                <el-form-item label="联系电话" prop="telNo">
                    <el-input v-model="dialogInfo.telNo" placeholder="请输入" style="width: 440px" maxlength="20" />
                </el-form-item>
                <el-form-item label="分类" prop="companyClass">
                    <el-input v-model="dialogInfo.companyClass" placeholder="请输入" style="width: 440px" maxlength="20" />
                </el-form-item>
                <el-form-item label="注册地址" prop="address">
                    <el-input v-model="dialogInfo.address" placeholder="请输入" style="width: 440px" maxlength="120" />
                </el-form-item>
                <el-form-item label="成立日期" prop="establishmentDate">
                    <el-date-picker v-model="dialogInfo.establishmentDate" type="date" style="width: 440px"
                        placeholder="请选择" value-format="YYYY-MM-DD" />
                </el-form-item>
                <!-- <el-form-item label="所在地区" prop="validity">
                    <AddressSelect></AddressSelect>
                </el-form-item> -->
            </el-form>
            <div v-if="dialogIsEdit" class="dialog-footer">
                <el-button v-loading="dialogSubmitLoading" type="primary" @click="submit">提 交</el-button>
                <el-button @click="isShowEditDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
 
<script setup>
import {
    apiGetSubOrgList,
    apiAddSubOrg,
    apiEditSubOrg,
} from "@/api/organization";

import AddressSelect from "@/components/AddressSelect"
const { proxy } = getCurrentInstance();

const detectionList = ref([]);
const loading = ref(false);
const dialogSubmitLoading = ref(false);
const isShowEditDialog = ref(false);
const dialogIsEdit = ref(true);
const dialogInfo = ref({})
const dialogType = ref(1); //1、新增，2、编辑，3、详情
const total = ref(0);

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        entname: '',
        area: '',
    },
    rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        officeTel: [{ required: true, message: "请输入", trigger: "blur" }],
        telNo: [{ required: true, message: "请输入", trigger: "blur" }],
        contacter: [{ required: true, message: "请输入", trigger: "blur" }],
        address: [{ required: true, message: "请输入", trigger: "blur" }],
        legalRepresentative: [{ required: true, message: "请输入", trigger: "blur" }],
        companyClass: [{ required: true, message: "请输入", trigger: "blur" }],
        uniformSocialCreditNo: [{ required: true, message: "请选择", trigger: "blur" }],
        establishmentDate: [{ required: true, message: "请选择", trigger: "change" }],
    }
});

const { queryParams, rules } = toRefs(data);

/** 查询列表 */
const getList = () => {
    loading.value = true;
    apiGetSubOrgList(queryParams.value).then(res => {
        loading.value = false;
        if (res && res.data) {
            detectionList.value = res.data.records
            total.value = res.data.total
        } else {
            detectionList.value = []
            total.value = 0
        }
    }).catch(err => {
        loading.value = false;
        detectionList.value = []
        total.value = 0
    });
};

getList();

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
};

/** 删除按钮操作 */
function delItem(row) {
    proxy.$modal.confirm('是否确认删除该数据项？').then(() => {

    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
};


const getDialogTitle = () => {
    if (dialogType.value == 1) {
        return '新增'
    }
    if (dialogType.value == 2) {
        return '编辑'
    }
    return '详情'
}

const addNew = () => {
    dialogType.value = 1
    dialogIsEdit.value = true
    openDialog({})
}

const lookItem = (row) => {
    dialogType.value = 3
    dialogIsEdit.value = false
    openDialog(row)
}

const editItem = (row) => {
    dialogType.value = 2
    dialogIsEdit.value = true
    openDialog(row)
}

const openDialog = (row) => {
    dialogInfo.value = row
    isShowEditDialog.value = true
    setTimeout(() => {
        proxy.$refs["dialogFormRef"].clearValidate();
    }, 200);
}


const submit = () => {
    proxy.$refs["dialogFormRef"].validate(valid => {
        if (valid) {
            dialogSubmitLoading.value = true
            if (dialogInfo.value.id) {
                //编辑
                apiEditSubOrg(dialogInfo.value).then(res => {
                    dialogSubmitLoading.value = false;
                    if (res && res.code == 200) {
                        isShowEditDialog.value = false
                        proxy.$modal.msgSuccess("操作成功");
                        getList()
                    }
                }).catch(err => {
                    dialogSubmitLoading.value = false;
                });

            } else {
                //新增
                apiAddSubOrg(dialogInfo.value).then(res => {
                    dialogSubmitLoading.value = false;
                    if (res && res.code == 200) {
                        isShowEditDialog.value = false
                        proxy.$modal.msgSuccess("操作成功");
                        getList()
                    }
                }).catch(err => {
                    dialogSubmitLoading.value = false;
                });
            }
        }
    })
}

</script>
 

<style lang="scss" scoped>
.app-container {
    padding-top: 50px;
}

.dialog-pic-div {
    .el-image {
        width: 100px;
        height: 100px;
        margin: 0 10px 10px 10px;
    }
}
</style>

<style lang="scss">
.el-dialog__body {
    .el-cascader {
        width: 440px !important;
    }
}
</style>